<template>
		<view class="list">
			<view class="item" v-for="(item,index) in data" :key="index" @click="sheep.$router.go('/pages/pet/activityDetails', { id: item.id })">
				<image class='img'  :src="sheep.$url.cdn(item.image || item.images[0])" mode="aspectFill"  ></image>
				<view class="title overflow-ellipsis">{{ item.title }}</view>
				<view class="time_hot">
					<view class="time">{{time(item)}}</view>
					<view class="hot_nums">
						<image class="hot_img" :src="sheep.$url.cdn('/storage/default/202401301552028386.png')"></image>
						<view class="num">{{item.hot}}</view>
					</view>
				</view>
				<view class="labels">
					<view class="label" v-for="(it,ind) in item.labels.slice(0,2)" :key="it">{{it}}</view>
				</view>
				<view class="address overflow-ellipsis">{{calcAddress(item)}}</view>
				<view class="price_name">
					<template v-if="price_show(item)">
						<view class="price"><text class="money">￥</text><text class="price">{{item.price}}</text><text class="unit">/{{item.unit}}</text></view>
					</template>
					
					<template v-else>
						<text class="free">免费</text>
					</template>
					<view class="name" :style="{background:bgColor(item)}">
						<text class="num_text" :style="{color:textColor(item)}">{{limit(item)}}</text>
					</view>
				</view>
			</view>
		</view>
</template>

<script setup>
	
	import {onMounted,reactive,inject,computed} from 'vue';
	
	import sheep from '@/sheep';
	
	import _ from "lodash"
	
	const props=defineProps({
		data:{
			type:Array,
			default:[],
		}
	})
	
	const time =(item)=>{
		let begin_time = new Date(item.begin_time.replace(/-/g, '/'))
		let end_time = new Date(item.end_time.replace(/-/g, '/'))
		return `${begin_time.getFullYear()}.${begin_time.getMonth() + 1 < 10 ? `0${begin_time.getMonth() + 1}` : begin_time.getMonth() + 1}.${begin_time.getDate() < 10 ? `0${begin_time.getDate()}` : begin_time.getDate()}-${end_time.getMonth() + 1 < 10 ? `0${end_time.getMonth() + 1}` : end_time.getMonth() + 1}.${end_time.getDate() < 10 ? `0${end_time.getDate()}` : end_time.getDate()}`
	}
	
	const price_show = (item) => {
		return item.price == null || item.price == 0 ? false : true;
	}
	
	//处理价格
	const calcPrice =(price)=>{
		var price_string = String(price)
		
		if(price_string.length>0 && price_string.includes('.')){
			
			var p_arr = price_string.split('.');
			
			if(String(p_arr[1]).length>0 && _.startsWith(p_arr[1],'0')){
				return p_arr[0];
			}else{
				return price_string;
			}
		}else{
			return 0;
		}
	}
	
	const calcAddress=(item)=>{
		if(item.city && item.city.length>0){
			return item.city+"."+item.location
		}else{
			return "";
		}
	}
	
	
	// const labels = (item)=>{
	// 	if(item.labels) return item.labels.slice(0,2);
		
	// }
	
	const limit=(item)=>{
		let time = new Date().getTime()
		let end_time = new Date(item.stop_time.replace(/-/g, '/')).getTime()
		if (item.num === 0 || time >= end_time) {
			return '报名已结束'
		}
		return `剩余名额${item.num}`
	}
	
	const bgColor = (item) => {
		let time = new Date().getTime()
		let end_time = new Date(item.stop_time.replace(/-/g, '/')).getTime()
		// 报名已结束
		if (item.num == 0 || time >= end_time) {
			return 'rgba(254, 53, 58, .10)'
		}
		// 剩余20%
		if ((item.num) <= Math.ceil((item.num + item.signed_num) * 0.2)) {
			return `rgba(254, 53, 58, 1)`;
		} else {
		// 大于20%
			return `rgba(254, 53, 58, .10)`;
		}
	}
	
	const textColor = (item) => {
		let time = new Date().getTime()
		let end_time = new Date(item.stop_time.replace(/-/g, '/')).getTime()
		// 报名已结束
		if (item.num === 0 || time >= end_time) {
			return '#7C7C7C';
		}
		// 剩余20%
		if ((item.num) <= Math.ceil((item.num +item.signed_num) * 0.2)) {
			return '#fff';
		} else {
			// 大于20%
			return '#7C7C7C';
		}
	}
	
	
</script>

<style lang="scss" scoped>
.list{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	flex-wrap: wrap;
	background-color:#F6F6F6;
}
.item{
	background-color:#FFFFFF;
	margin-left:8rpx;
	margin-right:8rpx;
	
	width:calc((100% - 32rpx) / 2);
	margin-top:16rpx;
	border-radius:10rpx;
	font-family: Source Han Sans;
	.img{
		width:100%;
		height:400rpx;
		border-radius:16rpx;
		
	}
	.title{
		font-size: 28rpx;
		font-weight: 400;
		color:#212121;
		margin-top:8rpx;
	}
	
	.time_hot{
		display:flex;
		flex-direction:row;
		justify-content: space-between;
		align-items:center;
		margin-top:8rpx;
		.time{
			
			font-size: 20rpx;
			font-weight: 400;
			line-height: 24rpx;
			color:#999999;
		}
		.hot_nums{
			display:flex;
			flex-direction:row;
			justify-content: flex-end;
			align-items:center;
			margin-right:6rpx;
			.hot_img {
				width: 60rpx;
				height: 30rpx;
				margin-right:8rpx;
			}
			.hot_txt{
				font-weight: 500;
				font-size: 20rpx;
				line-height: 24rpx;
				color:#FFFFFF;
				background-color: #FE353A;
				padding:2rpx;
				margin-right: 10rpx;
				letter-spacing:1rpx;
				border-radius: 6rpx 6rpx 10rpx 6rpx;
				
			}
			.num{
				font-weight: 500;
				font-size: 24rpx;
				line-height: 28rpx;
				color:#FE353A;
			}
		}
	}
	.labels{
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:center;
		font-family: Source Han Sans;
		margin-top:10rpx;
		.label{
			font-weight: 400;
			font-size: 20rpx;
			line-height: 24rpx;
			color:#999999;
			border:solid  #C8C8C8 1rpx;
			border-radius:4rpx;
			margin-left:8rpx;
			letter-spacing:1rpx;
			display:flex;
			justify-content:center;
			align-items:center;
			padding:4rpx;
		}
		
	}
	.address{
		font-weight: 400;
		font-size: 24rpx;
		line-height: 28rpx;
		color:#999999;
		letter-spacing:1rpx;
		
		margin-top:10rpx;
		
		width:100%;
		
	}
	.price_name{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		margin-top:8rpx;
		margin-bottom:10rpx;
		.price{
			color:#FE353A;
			.money{
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: 700;
				font-size: 20rpx;
				line-height: 24rpx;
			}
			.price{
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: 700;
				font-size: 36rpx;
				line-height: 48rpx;
			}
			.unit{
				color:#999999;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 24rpx;
			}
		}
		.name{
			
			border-radius:4rpx;
			font-weight: 400;
			font-size: 20rpx;
			line-height: 30rpx;
			letter-spacing:1rpx;
			padding-left:4rpx;
			padding-right:4rpx;
			display:flex;
			justify-content:center;
			align-items:center;
			margin-right:6rpx;
			.num_text {
				font-weight: 400;
				font-size: 22rpx;
				line-height: 30rpx;
				padding:4rpx;
			}
		}
		
		.free {
			background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 209, 209, 0.6) 100%);
			font-weight: 700;
			font-size: 24rpx;
			line-height: 30rpx;
			color: #FE353A;
			margin-bottom: 8rpx;
			letter-spacing: 1rpx;
			border-radius: 5rpx;
			width:100rpx;
			display:flex;
			justify-content:center;
			align-items:center;
			margin-left:10rpx;
			margin-top:8rpx;
		}
	}
	
	
}

/* 文本超出多行显示省略 如两行 */
.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>